<template>
  <div class="test-container">
    <div class="test-container-header flex-space-be">
      <div class="class-name">
        <span
          >当前课程：
          {{ checkedBookData.edition_name + "-" + checkedBookData.grade_name }}
        </span>
      </div>
      <div>
        <span class="mr20"
          >本模块共有{{ paperData.total_num || 0 }}个生词，有{{
            reviewNum || 0
          }}个需要复习
        </span>
        <el-button
          class="button button-bg-second"
          :disabled="!reviewNum || reviewNum <= 0"
          @click="goReview"
          >智能复习
        </el-button>
        <el-button
          class="download-btn click"
          @click="downloadData"
          :disabled="!paperData.total_num || paperData.total_num <= 0"
        >
          <i class="font_family icon-Group-"></i>
          <!-- <img class="mr5" src="../../../assets/img/download.png" alt="" /> -->
          <span>下载</span>
        </el-button>
      </div>
    </div>
    <div class="info-table">
      <div class="clear-float common-table common-pagination">
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            :index="indexMethod"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="phonetic_american"
            label="句子读音"
            width="100"
          >
            <template slot-scope="scope">
              <div class="table-cell audio-paly-box">
                <AudioPlay
                  :ref="'audio' + scope.row.word_id"
                  :type="4"
                  :audioSrc="baseURL + scope.row.audioURL"
                ></AudioPlay>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="word_name" label="句子英文">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sentence }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="paraphrase" label="句子中文">
            <template slot-scope="scope">
              <div>
                {{ scope.row.paraphrase }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="memory_strength" label="记忆强度" width="100">
          </el-table-column>
          <el-table-column prop="score" label="距离复习" width="100">
            <template slot-scope="scope">
              <div>
                <span
                  class="red-color"
                  v-if="!scope.row.is_review || scope.row.is_review <= 0"
                  >请立即复习</span
                >
                <span v-else>
                  {{
                    $moment.duration(scope.row.is_review, "minutes").humanize()
                  }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          v-if="paperData.total_page > 1"
          class="fr"
          background
          :page-size="paperParams.pageSize"
          layout="prev, pager, next"
          :total="paperData.total_num"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getMemoryReview } from "@/api/sentence";
import AudioPlay from "@/components/AudioPlay";
export default {
  data() {
    return {
      tableData: [],
      paperData: {
        total_num: 0,
        review_num: 0,
        page_num: 0,
      },
      paperParams: {
        pageNum: 1,
        pageSize: 10,
      },
      checkedBookData: {},
      categoryObj: {
        0: "记忆",
        1: "词听",
        2: "听写",
        3: "默写",
      },
    };
  },
  methods: {
    downloadData() {
      let data = {
        pageNum: 1,
        pageSize: 99999,
        category: this.type,
        bookId: this.bookId,
      };
      getMemoryReview(data).then((res) => {
        if (res.code == 200 && res.data) {
          let listData = res.data.list.map((item) => {
            return {
              // 句子
              sentence: item.content,
              // 释义
              paraphrase: item.translation,
            };
          });
          // console.log(listData);
          this.export2Excel(listData);
        }
      });
    },
    //

    export2Excel(listData) {
      require.ensure([], () => {
        const {
          export_json_to_excel,
        } = require("@/assets/js/vendor/Export2Excel");
        const tHeader = ["句子", "释义"]; //生成Excel表格的头部标题栏
        const filterVal = ["sentence", "paraphrase"]; //生成Excel表格的内容栏（根据自己的数据内容属性填写）
        const list = listData; //需要导出Excel的数据
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(
          tHeader,
          data,
          `${this.$store.getters.sentenceCategory[this.type].title}-记忆追踪`
        ); //这里可以定义你的Excel表的默认名称
      });
    },
    // 参数过滤
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    playAudio(refName) {
      // this.$pauseAllAudio();
      if (this.$refs[refName]) {
        this.$refs[refName].play();
      }
    },
    indexMethod(index) {
      return (
        (this.paperData.page_num - 1) * this.paperParams.pageSize + index + 1
      );
    },
    goReview() {
      this.$router.push({
        name: this.$store.getters.sentenceCategory[this.type].route,
        query: {
          isReview: true,
        },
      });
    },
    getMemoryReview() {
      let data = {
        pageNum: this.paperParams.pageNum,
        pageSize: this.paperParams.pageSize,
        category: this.type,
        bookId: this.bookId,
      };
      getMemoryReview(data).then((res) => {
        if (res.code == 200 && res.data) {
          this.paperData = res.data;
          this.tableData = res.data.list.map((item) => {
            // 句子
            item.sentence = item.content;
            // 释义
            item.paraphrase = item.translation;
            // 音频
            item.audioURL = item.audio_src;
            return item;
          });
          this.paperData.page_num = this.paperParams.pageNum;
        }
      });
    },
    handleCurrentChange(value) {
      this.paperParams.pageNum = value;
      this.getMemoryReview();
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getMemoryReview();
  },
  components: {
    AudioPlay,
  },
  props: {
    type: {
      type: Number,
    },
    bookId: {
      type: Number,
    },
    reviewNum: {
      type: Number,
    },
  },
};
</script>